<!--
    @author Yancy Zhang
    @date 2022/4/5
    @description 网页头部组件
-->
<template>
  <header>
    <div class="nav-header">
      <div class="meun-icon">
        <i class="el-icon-menu" @click="showMenu"></i>
      </div>
      <el-collapse-transition>
        <div class="sidebar" v-show="isShowMenu">
          <div class="sidebar-inner">
            <nav>
              <ul class="sidebar-nav">
                <li>
                  <router-link to="/" exact>主页</router-link>
                </li>
                <li>
                  <router-link to="/article-list">博客</router-link>
                </li>
                <li>
                  <router-link to="/nav-page">导航</router-link>
                </li>
                <li>
                  <router-link to="/about">关于</router-link>
                </li>
              </ul>
            </nav>
          </div>
        </div>
      </el-collapse-transition>
      <div class="logo">
        <a href="">Yancy's Blog</a>
      </div>
      <nav>
        <ul class="nav-ul">
          <li>
            <router-link to="/" exact>主页</router-link>
          </li>
          <li>
            <router-link to="/article-list">博客</router-link>
          </li>
          <li>
            <router-link to="/nav-page">导航</router-link>
          </li>
          <li>
            <router-link to="/about">关于</router-link>
          </li>
        </ul>
      </nav>
      <div class="search">
        <div class="search-box">
          <el-input
              placeholder="搜索……"
              prefix-icon="el-icon-search"
              @keyup.enter.native="search"
              v-model="searchWord">
          </el-input>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  data(){
    return{
      searchWord: "",
      /*是否显示侧边菜单*/
      isShowMenu: false
    }
  },
  methods:{
    showMenu(){
      this.isShowMenu = !this.isShowMenu;
    },
    /*按下回车事件 跳转到搜索界面*/
    search(){
      if(this.searchWord === ""){
        this.$message.warning("请输入搜索关键词！");
        return;
      }
      this.$router.push({
        path: `/search/${this.searchWord}`
      })
    }
  }
}
</script>

<style scoped>
header{
  background-color: #303643;
  color: #bebfc0;
}
.nav-header{
  position: relative;
  padding: 0 20px;
  margin: 0 auto;
  width: 1000px;
  height: 50px;
  line-height: 50px;
}
.meun-icon{
  float: left;
  font-size: 1.5rem;
  padding: 0 10px;
  display: none;
}
.sidebar{
  position: fixed;
  z-index: 10;
  margin: 0;
  left: 0;
  bottom: 0;
  top: 50px;
  width: 100%;
  height: 50px;
}
.sidebar-inner{
  width: 100%;
  height: 100%;
}
.sidebar-inner nav{
  background-color: #fff;
  width: 100%;
  height: 100%;
}
.logo{
  display: inline-block;
  float: left;
  padding-right: 50px;
}
.logo a{
  font-weight: 600;
  font-family: 'Press Start 2P';
}
nav{
  display: inline-block;
}
ul,li {
  list-style: none;
  padding: 0px;
  margin: 0px;
}
ul li{
  float:left; /* 向左漂移，将竖排变为横排 */
  font-weight: 500;
}
ul li a:hover{
  color: #42b983;
}
ul li a{
  display: block;
  padding: 0 20px;
  font-weight: 500;
}

.search{
  position: absolute;
  top: 0;
  right: 20px;
}

/*移动端适配*/
@media screen and (max-width:960px){
  .nav-header{
    width: 100%;
    padding: 0 0;
  }
}
@media screen and (max-width:600px){
  .meun-icon{
    display: block;
  }
  .nav-ul{
    display: none;
  }
  .search-box{
    width: 100px;
    right: 0;
  }
}
</style>
